<template>
  <div class="goods">
    <div class="wrap">
      <Crumb :navs="nav"> </Crumb>
      <img src="../assets/img/banner.4c6b6225.png" width="100%" alt="" />
      <ul class="options">
        <li>
          <strong>排序：</strong>
          <span
            :class="{ active: index == options1Index }"
            v-for="(item, index) in options1"
            :key="index"
            @click="options1IndexFn(item.min, item.max, index)"
            >{{ item.txt }}
          </span>
        </li>
        <li>
          <strong>分类：</strong>
          <span
            :class="{ active: index == options2Index }"
            v-for="(item, index) in options2"
            :key="index"
            @click="options2IndexFn(item.type, index)"
            >{{ item.txt }}
          </span>
        </li>
      </ul>
      <List :arr="goodsListShow" />
      <div class="jz"><span v-show="!isReachBottom" class="iconfont icon-loading"></span><span>{{isReachBottom?"已经到底部了":"Loading..."}}</span></div>
    </div>
  </div>
</template>                            
<script>
import Crumb from "../components/Crumb.vue";
import List from "../components/home/List.vue";
import { GoodsSearchApi } from "@/request/api";
import {mapState} from "vuex";
import {getScrollTop,getClientHeight,getScrollHeight} from "@/utils/index"
export default {
  data() {
    return {
      nav: [
        { name: "首页", link: "#" },
        { name: "全部商品", link: "#" },
      ],
      goodsList: [],
      options1: [
        { min: 0, max: 0, txt: "全部" },
        { min: 0, max: 0, txt: "我还可以兑换" },
        { min: 0, max: 500, txt: "0-500分" },
        { min: 500, max: 1000, txt: "500-1000分" },
        { min: 1000, max: 1500, txt: "1000-1500分" },
        { min: 1500, max: 2500, txt: "1500-2500分" },
        { min: 2500, max: 6500, txt: "2500-6500分" },
        { min: 6500, max: 10000, txt: "6500-10000分" },
      ],
      options1Index: 0,
      options2: [
        { type: 0, txt: "全部" },
        { type: 1, txt: "实体商品" },
        { type: 2, txt: "虚拟商品" },
      ],
      options2Index: 0,
      //  栏目
      did: 0,
      // 1->实体商品 2->虚拟商品 0->全部
      type: 0,
      // 最少积分
      min: 0,
      // 最多积分
      max: 0,
      // 商品关键词
      keyword: "",
      goodsListShow:[],
      //第一页
      page:1,
      size:8,
      isLoading:false,
      isReachBottom:false,
    };
  },
  computed:{
     ...mapState({
      userInfo:state=>state.userInfo.userInfo,
    }),
  },
  components: {
    Crumb,
    List,
  },
   created() {
    
    this.keyword = this.$route.query.keyword ||""
    this.goodsSearch();
  },
  mounted(){
    window.addEventListener("scroll",this.scrollFn)
  },
  updated(){
     this.options1[1].max=this.userInfo.coin
    // console.log(this.userInfo.coin);
  },
  beforeDestroy(){
     window.removeEventListener("scroll",this.scrollFn)
  },
  methods: {
    // 请求商品信息
    async goodsSearch() {
      let res = await GoodsSearchApi({
        did: this.did,
        type: this.type,
        min: this.min,
        max: this.max,
        keyword: this.keyword,
      });
      //  给商品列表赋值
      this.goodsList = res.data;
      this.goodsListShow = this.goodsList.filter((item,index)=>index<8)
      this.page=1;
       this.isReachBottom=false;
      if(this.goodsListShow.length==this.goodsList.length){
            this.isReachBottom=true;
            return;
         }
    },
    options1IndexFn(min, max, index) {
      this.options1Index = index;
      (this.min = min), (this.max = max);
      this.goodsSearch();
    },
    options2IndexFn(type, index) {
      (this.options2Index = index), (this.type = type);
      this.goodsSearch();
    },
    scrollFn(){
        // console.log("滚动了....",getScrollTop(),getClientHeight(),getScrollHeight());
        if(getClientHeight()+getScrollTop()>=getScrollHeight()-100){
         console.log("加载下一页数据");
         if(this.goodsListShow.length==this.goodsList.length){
            this.isReachBottom=true;
            return;
         }
         if(!this.isLoading){
          this.isLoading=true;//开始加载下一页 更新数据
            this.page++;//下一页
            // 往后端发请求
            setTimeout(()=>{
          for(let i =(this.page-1)*this.size;i<this.page*this.size;i++){
          console.log("page",this.page,"i",i,this.goodsList[i]);
          this.goodsList[i] && this.goodsListShow.push(this.goodsList[i])
         }
        //  加载完毕
          this.isLoading=false
            },500)
         }
       
        } 
    }
  },
  //  watch:{
  //    "$route.query.keyword":{
  //     handler(newVal,oldVal){
  //     this.keyword=newVal;
  //      this.goodsSearch();
  //       }
       
  //     }
  //   },
 beforeRouteUpdate (to, from, next) {
  console.log("beforeRouteUpdate",to.query,from.query);
   this.keyword=to.query.keyword;
   this.goodsSearch();
}
};
</script>
 
<style lang = "less" scoped>
@import "../assets/css/public.less";

.goods {
  padding-bottom: 50px;
  background: #efefef;
  padding-top: 20px;
  .options {
    padding-top: 20px;
    padding-bottom: 40px;
    li {
      margin-top: 20px;
      strong {
        color: #000;
        font-weight: bold;
      }
      span {
        margin-right: 20px;
        margin-left: 10px;
        cursor: pointer;
        color: #999;
        &.active {
          color: @base-color;
          font-weight: bold;
        }
      }
    }
  }
  .jz{
   display: flex;
   justify-content: center;
   .iconfont{
    display: block; 
    margin-top: 1px;
     margin-right: 5px;
     animation: load 1s linear infinite;
   }
   @keyframes load {
    0%{
     transform: rotate(0deg);
    }
    100%{
       transform: rotate(360deg);
    }
   }
  }
}
</style>